<?php /* Smarty version Smarty-3.0.7, created on 2014-01-03 15:39:13
         compiled from "E:/runtime/other/zqn.sh/app_web/_view/templates\show/show.htm" */ ?>
<?php /*%%SmartyHeaderCode:3111852c66921277750-62348234%%*/if(!defined('SMARTY_DIR')) exit('no direct access allowed');
$_smarty_tpl->decodeProperties(array (
  'file_dependency' => 
  array (
    '81adf792bd3379bba0fb2d68859cfa4d179f1d70' => 
    array (
      0 => 'E:/runtime/other/zqn.sh/app_web/_view/templates\\show/show.htm',
      1 => 1388734751,
      2 => 'file',
    ),
  ),
  'nocache_hash' => '3111852c66921277750-62348234',
  'function' => 
  array (
  ),
  'has_nocache_code' => false,
)); /*/%%SmartyHeaderCode%%*/?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>色彩作品展示 - 1岁宝宝照片</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content="Sliding Panel Photowall Gallery with jQuery" />
        <meta name="keywords" content="jquery, images, gallery, photowall, slideshow"/>
        <link rel="stylesheet" href="<?php echo @APP_PATH;?>
/_view/templates/show/css/style.css" type="text/css" media="screen"/>
    </head>
<body>
        <div class="infobar">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center"><span id="description"></span>
            <span class="reference">
                作品分类： <a href="index2.htm">1岁以下宝宝照片</a>　<a href="index2.htm">1岁宝宝照片</a>　<a href="index2.htm">2岁宝宝照片</a>　<a href="index2.htm">3岁宝宝照片</a>　<a href="index2.htm">4岁以上宝宝照片</a></span>
                <span id="loading">Loading Image</span></td>
              <td width="60" class="d2"><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1000219134'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s22.cnzz.com/z_stat.php%3Fid%3D1000219134' type='text/javascript'%3E%3C/script%3E"));</script></td>
            </tr>
          </table>
        </div>
<div id="thumbsWrapper">
    <div id="content" ><div id="bt"><a href="index.htm"><img src="<?php echo @APP_PATH;?>
/_view/templates/show/images/logo.gif" alt="" align="absmiddle" border="0" style="float:inherit; opacity:1.0;" title="返回作品展示首页"/></a>　<span style="color:#83c931">作品展示：</span><a href="index2.htm">1岁宝宝照片</a> - 相册名称春天里　　<span id="bt2">&lt;<a href="#;">上一相册</a>　<a href="#;">下一相册</a>&gt;</span></div>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/1.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/1.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/2.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/2.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/3.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/3.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/4.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/4.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/5.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/5.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/6.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/6.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/7.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/7.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/8.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/8.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/9.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/9.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/10.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/10.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/11.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/11.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/12.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/12.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/13.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/13.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/14.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/14.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/15.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/15.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/16.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/16.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/17.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/17.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/18.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/18.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/19.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/19.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/20.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/20.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/21.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/21.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/22.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/22.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/23.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/23.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/24.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/24.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/25.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/25.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/26.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/26.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/27.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/27.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/28.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/28.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/29.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/29.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/30.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/30.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/31.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/31.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/32.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/32.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/33.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/33.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/34.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/34.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/35.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/35.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/36.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/36.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/37.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/37.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/38.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/38.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/39.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/39.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/30.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/40.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/41.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/41.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/42.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/42.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/43.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/43.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/44.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/44.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/45.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/45.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/46.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/46.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/47.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/47.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/48.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/48.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/49.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/49.jpg" title=""/>
                <img src="<?php echo @APP_PATH;?>
/_view/templates/show/thumbs/50.jpg" alt="<?php echo @APP_PATH;?>
/_view/templates/show/images/50.jpg" title=""/>
                <div class="placeholder"></div>
  </div>
</div>
<div id="panel">
            <div id="wrapper">
                <a id="prev"></a>
                <a id="next"></a>
            </div>
        </div>
        <!-- The JavaScript -->
        <script type="text/javascript" src="<?php echo @APP_PATH;?>
/_view/templates/show/css/jquery.min.js"></script>
<script type="text/javascript">
            $(function() {
                /* this is the index of the last clicked picture */
                var current = -1;
                /* number of pictures */
                var totalpictures = $('#content img').size();
                /* speed to animate the panel and the thumbs wrapper */
                var speed 	= 500;

                /* show the content */
                $('#content').show();

                /*
                when the user resizes the browser window,
                the size of the picture being viewed is recalculated;
                 */
                $(window).bind('resize', function() {
                    var $picture = $('#wrapper').find('img');
                    resize($picture);
                });

                /*
                when hovering a thumb, animate it's opacity
                for a cool effect;
                when clicking on it, we load the corresponding large image;
                the source of the large image is stored as
                the "alt" attribute of the thumb image
                 */
                $('#content > img').hover(function () {
                    var $this   = $(this);
                    $this.stop().animate({'opacity':'1.0'},200);
                },function () {
                    var $this   = $(this);
                    $this.stop().animate({'opacity':'0.4'},200);
                }).bind('click',function(){
                    var $this   = $(this);

                    /* shows the loading icon */
                    $('#loading').show();

                    $('<img/>').load(function(){
                        $('#loading').hide();

                        if($('#wrapper').find('img').length) return;
                        current 	= $this.index();
                        var $theImage   = $(this);
                        /*
                        After it's loaded we hide the loading icon
                        and resize the image, given the window size;
                        then we append the image to the wrapper
                        */

                        resize($theImage);

                        $('#wrapper').append($theImage);
                        /* make its opacity animate */
                        $theImage.fadeIn(800);

                        /* and finally slide up the panel */
                        $('#panel').animate({'height':'100%'},speed,function(){
                            /*
                            if the picture has a description,
                            it's stored in the title attribute of the thumb;
                            show it if it's not empty
                             */
                            var title = $this.attr('title');
                            if(title != '')
                                $('#description').html(title).show();
                            else
                                $('#description').empty().hide();

                            /*
                            if our picture is the first one,
                            don't show the "previous button"
                            for the slideshow navigation;
                            if our picture is the last one,
                            don't show the "next button"
                            for the slideshow navigation
                             */
                            if(current==0)
                                $('#prev').hide();
                            else
                                $('#prev').fadeIn();
                            if(current==parseInt(totalpictures-1))
                                $('#next').hide();
                            else
                                $('#next').fadeIn();
                            /*
                            we set the z-index and height of the thumbs wrapper
                            to 0, because we want to slide it up afterwards,
                            when the user clicks the large image
                             */
                            $('#thumbsWrapper').css({'z-index':'0','height':'0px'});
                        });
                    }).attr('src', $this.attr('alt'));
                });

                /*
                when hovering a large image,
                we want to slide up the thumbs wrapper again,
                and reset the panel (like it was initially);
                this includes removing the large image element
                 */
                $('#wrapper > img').live('click',function(){
                    $this = $(this);
                    $('#description').empty().hide();

                    $('#thumbsWrapper').css('z-index','10')
                    .stop()
                    .animate({'height':'100%'},speed,function(){
                        var $theWrapper = $(this);
                        $('#panel').css('height','0px');
                        $theWrapper.css('z-index','0');
                        /*
                        remove the large image element
                        and the navigation buttons
                         */
                        $this.remove();
                        $('#prev').hide();
                        $('#next').hide();
                    });
                });

                /*
                when we are viewing a large image,
                if we navigate to the right/left we need to know
                which image is the corresponding neighbour.
                we know the index of the current picture (current),
                so we can easily get to the neighbour:
                 */
                $('#next').bind('click',function(){
                    var $this           = $(this);
                    var $nextimage 		= $('#content img:nth-child('+parseInt(current+2)+')');
                    navigate($nextimage,'right');
                });
                $('#prev').bind('click',function(){
                    var $this           = $(this);
                    var $previmage 		= $('#content img:nth-child('+parseInt(current)+')');
                    navigate($previmage,'left');
                });

                /*
                given the next or previous image to show,
                and the direction, it loads a new image in the panel.
                 */
                function navigate($nextimage,dir){
                    /*
                    if we are at the end/beginning
                    then there's no next/previous
                     */
                    if(dir=='left' && current==0)
                        return;
                    if(dir=='right' && current==parseInt(totalpictures-1))
                        return;
                    $('#loading').show();
                    $('<img/>').load(function(){
                        var $theImage = $(this);
                        $('#loading').hide();
                        $('#description').empty().fadeOut();

                        $('#wrapper img').stop().fadeOut(500,function(){
                            var $this = $(this);

                            $this.remove();
                            resize($theImage);

                            $('#wrapper').append($theImage.show());
                            $theImage.stop().fadeIn(800);

                            var title = $nextimage.attr('title');
                            if(title != ''){
                                $('#description').html(title).show();
                            }
                            else
                                $('#description').empty().hide();

                            if(current==0)
                                $('#prev').hide();
                            else
                                $('#prev').show();
                            if(current==parseInt(totalpictures-1))
                                $('#next').hide();
                            else
                                $('#next').show();
                        });
                        /*
                        increase or decrease the current variable
                         */
                        if(dir=='right')
                            ++current;
                        else if(dir=='left')
                            --current;
                    }).attr('src', $nextimage.attr('alt'));
                }

                /*
                resizes an image given the window size,
                considering the margin values
                 */
                function resize($image){
                    var windowH      = $(window).height()-100;
                    var windowW      = $(window).width()-80;
                    var theImage     = new Image();
                    theImage.src     = $image.attr("src");
                    var imgwidth     = theImage.width;
                    var imgheight    = theImage.height;

                    if((imgwidth > windowW)||(imgheight > windowH)){
                        if(imgwidth > imgheight){
                            var newwidth = windowW;
                            var ratio = imgwidth / windowW;
                            var newheight = imgheight / ratio;
                            theImage.height = newheight;
                            theImage.width= newwidth;
                            if(newheight>windowH){
                                var newnewheight = windowH;
                                var newratio = newheight/windowH;
                                var newnewwidth =newwidth/newratio;
                                theImage.width = newnewwidth;
                                theImage.height= newnewheight;
                            }
                        }
                        else{
                            var newheight = windowH;
                            var ratio = imgheight / windowH;
                            var newwidth = imgwidth / ratio;
                            theImage.height = newheight;
                            theImage.width= newwidth;
                            if(newwidth>windowW){
                                var newnewwidth = windowW;
                                var newratio = newwidth/windowW;
                                var newnewheight =newheight/newratio;
                                theImage.height = newnewheight;
                                theImage.width= newnewwidth;
                            }
                        }
                    }
                    $image.css({'width':theImage.width+'px','height':theImage.height+'px'});
                }
            });
        </script>
    </body>
</html>